<template>
  <div class="flex flex-col gap-2 market">
    <a-card class="head">
      <div class="flex justify-between">
        <div class="flex gap-2 items-center">
          {{ t["模板市场"] }}
          <a-tag>
            [{{ cardList.length }}/
            <template v-if="query.total"> {{ query.total }}] </template>
          </a-tag>
        </div>
        <div class="flex gap-2">
          <a-input-search
            v-model="query.templateName"
            @search="search"
            @keydown.enter="search"
          ></a-input-search>
          <a-popover trigger="click" position="br" :title="t['分辨率']">
            <a-button type="text">
              {{ t["筛选"] }}
              <icon-down />
            </a-button>
            <template #content>
              <a-card>
                <div class="flex gap-2 resolution-list">
                  <a-button
                    v-for="item in resolutionList"
                    :key="item.label"
                    :value="item.value"
                    :type="query.resolutionId === item.value ? 'primary' : 'secondary'"
                    @click="selectResolution(item.value)"
                  >
                    {{ item.label }}
                  </a-button>
                </div>
                <a-divider />
                <a-button status="warning" @click="clearResolution">
                  {{ t["清空"] }}
                </a-button>
              </a-card>
            </template>
          </a-popover>
        </div>
      </div>
      <a-row class="mt-3">
        <a-col>
          <a-pagination
            :total="query.total"
            :current="query.pageNum"
            :page-size="query.pageSize"
            @change="change"
            @page-size-change="onPageSize"
          ></a-pagination>
        </a-col>
      </a-row>
    </a-card>
    <a-card :loading="loading">
      <div class="template-list grid grid-cols-5 gap-2">
        <a-card v-for="item in cardList" :key="item.templateId">
          <template #cover>
            <div class="cover">
              <a-image height="100px" width="100%" fit="contain" :src="item.imgSrc" />
            </div>
          </template>
          <a-card-meta :title="item.templateName">
            <template #description>
              <div class="flex justify-between items-center">
                <div class="title">{{ item.resolutionWidth }}x{{ item.resolutionHeight }}</div>
                <div class="size">
                  <a-tag>{{ item.resolutionDesc }}</a-tag>
                </div>
                <a-button size="mini" type="primary" @click="copy(item.templateId || '')">
                  {{ t["复制"] }}
                </a-button>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </div>
    </a-card>
    <a-modal v-model:visible="visible" :title="t['复制模板']" :footer="false" width="400px">
      <div class="my-3">
        <a-input v-model="newTemplate.rename" :placeholder="t['请输入模板名称']"></a-input>
        <a-button
          type="primary"
          class="w-full mt-3"
          :disabled="newTemplate.rename.length === 0"
          @click="submit"
        >
          {{ t["确定"] }}
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { queryResolution } from "@/api/service/priceTag/priceTag";
import { IResolution } from "@/api/service/resolution/types";
import { copyTemplate, listMarket } from "@/api/service/template/template";
import { ITemplate } from "@/api/service/template/types";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";

import { IQuery } from "@/interface/IAxios";
import { SelectOptionData } from "@arco-design/web-vue";

const t = translate("公共模块");

const loading = ref(true);

const visible = ref(false);

const newTemplate = ref({
  copyList: [""],
  rename: ""
});
const query = ref<Required<IQuery>>({
  pageSize: 30,
  pageNum: 1,
  templateName: "",
  resolutionId: "",
  total: 0,
  isAsc: "desc",
  orderByColumn: "create_time",
  scoped: "0",
  scope: ENUM_DATA_SCOPE.PARENT_SHARED
});

const cardList = ref<ITemplate[]>([]);
/* 分辨率列表 */
const resolutionList = ref<SelectOptionData[]>([]);
const getResolution = async () => {
  const { data } = await queryResolution();
  resolutionList.value = data.map((item: IResolution) => ({
    label: item.description,
    value: item.resolutionId
  }));
};

const getList = async () => {
  const { rows, total } = await listMarket({
    ...query.value
  });
  loading.value = false;
  cardList.value = rows;
  query.value.total = total;
};
const change = (num: number) => {
  query.value.pageNum = num;
  getList();
};
const onPageSize = (pageSize: number) => {
  query.value.pageNum = pageSize;
  getList();
};
const search = () => {
  cardList.value = [];
  getList();
};
/* 选择尺寸 */
const selectResolution = (value: string | any) => {
  query.value.resolutionId = value;
  cardList.value = [];
  getList();
};
const clearResolution = () => {
  query.value.resolutionId = "";
  cardList.value = [];
  getList();
};

onMounted(async () => {
  await getList();
  getResolution();
});

const submit = async () => {
  await copyTemplate(newTemplate.value);
  visible.value = false;
  newTemplate.value = {
    copyList: [],
    rename: ""
  };
};
const copy = (id: string) => {
  visible.value = true;
  newTemplate.value.copyList = [id];
};
</script>

<style lang="scss" scoped>
@use "./style";
</style>
